<template>
	<div>
		<!-- <van-toast id="van-toast" /> -->
		<view style="position: relative; z-index: 99;">
			<van-cell :value="project_name" is-link @click="isShow=true" id="van-toast">
				<view slot="title">
					<view class="van-cell-text">请选择项目</view>
				</view>
			</van-cell>
			<van-action-sheet class="actionSheet" :show="isShow" :actions="projectlsit" @close="onClose" @select="onSelect" />
		</view>
		
		<view class="title">
			<view class="hr"></view>
			<view class="text">
				甲分包工程
			</view>
		</view>
		<Pie :seriesPie="seriesPie"></Pie>
		<view class="title">
			<view class="hr"></view>
			<view class="text">
				甲供材工程
			</view>
		</view>
		<Bar :seriesBar="seriesBar"></Bar>
	</div>
</template>

<script>
	import Pie from '@/components/pie'
	import Bar from '@/components/bar'
	export default {
		components: {
			Pie,
			Bar
		},
		data() {
			return {
				isShow: false,
				project_name: "",
				project_id: 1,
				projectlsit: [],
				moduleslist: [],
				seriesPie: [],
				seriesBar: [],
			}
		},
		onLoad() {
			this.getProject()
			this.getData()
			this.drawChart()
		},
		methods: {
			getProject() {
				uni.request({
					url: 'project', //仅为示例，并非真实接口地址。
					method: "get",
					header: {
						"Authorization": "Bearer" + " " + 'miniproject'
					},
					success: (res) => {
						this.project_name = res.data.data[0].name
						this.project_id = res.data.data[0].id
						this.projectlsit = res.data.data
						console.log("projectList", this.projectlsit);
					}
				})
			},
			onClose() {
				this.isShow = false
			},

			onSelect(event) {
				console.log(event.detail);
				this.project_name = event.detail.name
				this.project_id = event.detail.id
				this.getData()
				setTimeout(() => {
					this.drawChart()
				}, 2000)
			},
			getData() {
				uni.request({
					url: 'recoder', //仅为示例，并非真实接口地址。
					method: "get",
					header: {
						"Authorization": "Bearer" + " " + 'miniproject'
					},
					data: {
						project_id: this.project_id,
						day_id: "",
					},
					success: (res) => {
						this.moduleslist = res.data.moduleslist
						console.log("chart", res);
					}
				})
			},
			drawChart() {
				setTimeout(() => {
					this.seriesPie = []
					this.seriesBar = []
					
					this.moduleslist.map((item) => {
						this.seriesPie.push({
							name: item.name,
							value: item.totalmoney
						})
						// if (item.hasOwnProperty('children')) {
						// 	item.children.map((opt) => {
						// 		this.seriesPie.push({
						// 			name: opt.name,
						// 			value: opt.totalmoney
						// 		})
						// 	})
						// }
					})
					this.moduleslist[2].children.map((item) => {
						this.seriesBar.push({
							name: item.name,
							value: item.totalmoney
						})
					})
					console.log(this.seriesPie, "seriesPie");
					console.log(this.seriesBar, "seriesBar");
					// this.moduleslist[1].children.map((item) => {
					// 	if (item.hasOwnProperty('children')) {
					// 		categories.push(item.name)
					// 		series.push({
					// 			name: item.name,
					// 			value: 0,
					// 			id: item.id
					// 		})
					// 	}
					// })
					// this.moduleslist[1].children.map((item) => {
					// 	item.children.map((opt) => {
					// 		series.map((item) => {
					// 			if (item.id == opt.pid) {
					// 				item.value += opt.totalmoney
					// 			}
					// 		})
					// 	})
					// })
					// setTimeout(() => {
					// 	console.log(series, "series");
					// 	console.log(categories, "categories");
					// }, 500)
				}, 500)
			}
		}
	}
</script>

<style scoped>
	.title {
		height: 30px;
		line-height: 30px;
		padding-left: 10px;
		font-weight: bold;
		margin-bottom: 5px;
		display: flex;
	}

	.text {}
	
	.hr {
		margin-top: 4px;
		margin-right: 2px;
		width: 3px;
		height: 21px;
		background: rgb(36, 120, 242);
	}
	
	./* actionSheet{
		z-index: 1000 !important;
	} */
	.menu{
		position: relative;
		z-index: 99;
	}
</style>
